<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3_虚拟DOM与真实DOM</title>
  </head>
  <body>
    <!-- 准备号一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react dom操作 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1. 创建虚拟dom
      const VDOM = React.createElement('h1', { id: 'title' }, 'Hello,React')

      // 2. 渲染虚拟deom到界面
      //   ReactDom.render(VDOM, document.getElementById('test'))
      ReactDOM.render(VDOM, document.getElementById('test'))

      console.log(VDOM)
      /**
       * 关于虚拟DOM
       * 1. 本质是Object类型的对象
       * 2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM只有react内部在用，无需真实DOM那么多属性
       * 3. 虚拟DOM最终会被React转换成真实DOM，呈现在页面上
       */
    </script>
  </body>
</html>
